<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <div>
        <span>
            <input type="text" v-model="fname">
            <button @click="add">添加</button>
            <button @click="del">删除</button>
            <button @click="change">替换</button>
        </span>
    </div>
    <ul>
        <li :key="index" v-for="(item,index) in list">{{item}}</li>
    </ul>
    <div>{{info.name}}</div>
    <div>{{info.age}}</div>
    <div>{{info.gender}}</div>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            list:['apple','orange','banana'],
            fname:'',
            info:{
                name:'list',
                age:12
            }
        },
        methods:{
            add(){
                this.list.push(this.fname)
            },
            del(){
                this.list.pop()
            },
            change(){
                this.list=this.list.slice(0,2)
            }
        }
    })
    vm.list[1]='lemo'
    Vue.set(vm.list,2,'lemoee')
    vm.$set(vm.list,0,'asdddddddddddddd')
    vm.$set(vm.info,'gender','female')
</script>
</body>
</html>
